import Log  from "../../common/utils/log.js"

const lg = new Log('pattern');
export default {
  data: {
    ctx: null,
    R: 20,
    w: 360,
    h: 360,
    point_list: [],
    result: [-1],
    scope: 30, // 热区范围jghjgj
  },
  onInit() {
  },
  onShow(){
    this.initCanvas();
  },

  // 初始化画布
  initCanvas(){
    const c = this.$refs.canvas;
    this.ctx = c.getContext('2d', { antialias: true });
    this.createPoint();

  },
  // 创建9个密码点
  createPoint(){
    let point_x = Math.ceil((this.w - this.R * 6) / 4 + this.R);
    let point_y = Math.ceil((this.h - this.R * 6) / 4 + this.R);
    this.point_list = [];
    for (var j = 0; j < 3; j++) {
      for (var i = 0; i < 3; i++) {
        let d = {
          x: point_x * (i + 1) + this.R * i,
          y: point_y * (j + 1) + this.R * j
        }
        this.point_list.push(d);
        this.drawPoint(d);
      }
    }
    lg.log('9个密码点中心点位置：',this.point_list)
  },


  // 绘制9个密码点到画布上
  drawPoint(obj) {
    let {x, y} = obj;
    // 绘制外圆环
    this.ctx.beginPath();
    this.ctx.lineCap = "round"; //向线条的每个末端添加圆形线帽
    this.ctx.lineWidth = (this.R / 2);  //绘制圆的边框
    this.ctx.strokeStyle = '#ff9800'; //绘制边框的颜色
    this.ctx.arc(x, y, this.R, 0, 2 * Math.PI);
    this.ctx.stroke();
    this.ctx.closePath();

    // 绘制内圆
    this.ctx.beginPath();
    this.ctx.arc(x, y, this.R, 0, 2 * Math.PI);
    this.ctx.fillStyle = "#383838";
    this.ctx.fill();
    this.ctx.closePath();
  },

  onTouchStart(e){
    let x = e.touches[0].localX;
    let y = e.touches[0].localY;
    this.isCollision(x, y)
  },
  onTouchMove(e){
    let x = e.touches[0].localX;
    let y = e.touches[0].localY;
    this.isCollision(x, y);
    this.ctx.clearRect(0, 0, this.w, this.h);
    this.redraw(x, y, true)
  },
  onTouchend(e){
    this.ctx.clearRect(0, 0, this.w, this.h);
    this.redraw(e.touches[0].clientX, e.touches[0].clientY, false);
    var temp = [];
    for (var i in this.result) {
      temp.push(this.result[i])
    }
    lg.log('图案结果：',temp)
    this.result = [-1];
  },

  // 是否跟9个密码点发生接触。
  isCollision(x, y) {
    let c_x, c_y;
    for (let i in this.point_list) {
      c_x = Math.abs(x - this.point_list[i].x);
      c_y = Math.abs(y - this.point_list[i].y);
      // 如果方式碰撞，记录状态
      if (c_x < this.scope && c_y < this.scope) {
        lg.warn('发生了碰撞，碰撞点是：', i)
        this.drawStatus(i)
        return
      }
    }
  },
  //  绘制触摸到密码点的状态
  drawStatus(index) {
    this.ctx.beginPath();
    this.ctx.arc(this.point_list[index].x, this.point_list[index].y, (this.R / 2), 0, 2 * Math.PI);
    this.ctx.fillStyle = "#ac2dfb";
    this.ctx.fill();
    this.ctx.closePath();

    for (let i in this.result) {
      if (index == this.result[i]) {
        return;
      } else {
        if (i == this.result.length - 1) {
          this.result.push(index);
        }
      }
    }
  },
  redraw(tempx, tempy, bol) {
    this.drawline(this.result, tempx, tempy, bol); //画线

    // 绘制9个密码点
    for (var i in this.point_list) {
      this.drawPoint(this.point_list[i]);
    }
    // 绘制已经触摸过的密码点状态
    for (var i in this.result) {
      if (i != 0) {
        this.drawStatus(this.result[i]);

      }
    }
  },
  drawline(arr, x, y, bol) {

    // 当存在已经两个点的时候，两点直线形成连线
    this.ctx.beginPath();
    for (var i in arr) {
      if (i != 0) {
        if (i == 1) {
          this.ctx.moveTo(this.point_list[arr[i]].x, this.point_list[arr[i]].y);
        } else {
          this.ctx.lineTo(this.point_list[arr[i]].x, this.point_list[arr[i]].y);
        }
      }
    }
    this.ctx.strokeStyle = '#1a73e8';
    this.ctx.lineWidth = (this.R / 2);
    this.ctx.stroke();

    // 跟着手机滑动的线条
    if (bol) {
      this.ctx.beginPath();
      this.ctx.moveTo(this.point_list[arr[arr.length - 1]].x, this.point_list[arr[arr.length - 1]].y);
      this.ctx.lineTo(x, y);
      this.ctx.strokeStyle = '#04be02';
      this.ctx.lineWidth = (this.R / 2);
      this.ctx.stroke();
    }
  }
}
